<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline">
        <a-row :gutter="24">

          <a-col :md="6" :sm="8">
            <a-form-item label="数据源从">
              <data-source-select placeholder="请输入数据源从" v-model="queryParam.sourceId1"></data-source-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="目标数据源">
              <data-source-select placeholder="请输入目标数据源" v-model="queryParam.sourceId2"></data-source-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="视图名">
              <a-input placeholder="请输入视图名" v-model="queryParam.viewName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="差异视图">
              <a-select allowClear
                        style="width: 100%"
                        placeholder="请选择数据源"
                        v-model="queryParam.diff">
                <a-select-option key="" value="">全部</a-select-option>
                <a-select-option key="0" value="0">有差异</a-select-option>
                <a-select-option key="1" value="1">无差异</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" :loading="loading" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <a-button type="primary" :loading="loading" @click="syncDatasourceView(queryParam.sourceId1)"> <a-icon type="left"/>采集从数据源视图 </a-button>
              <a-button type="primary" :loading="loading" @click="syncDatasourceView(queryParam.sourceId2)">采集目标数据源视图 <a-icon type="right"/> </a-button>

            </span>
          </a-col>

        </a-row>
      </a-form>
    </div>

    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 一共 <a style="font-weight: 600">{{
        totalCount }}</a>项
        <!--<a style="margin-left: 24px" @click="onClearSelected">清空</a>-->
      </div>

      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="rownum"
        :columns="columns"
        :dataSource="dataSource"
        :loading="loading"
      >
    <span slot="result" slot-scope="text,record">
      <a-tag @click="viewDiff(record)" :color="text === 0? 'red':'green'">
        {{ text==0?'有差异':'无差异' }}
      </a-tag>
    </span>
        <span slot="action" slot-scope="text, record">
      <a-popconfirm title="确定同步到目标数据源吗?" @confirm="() => syncView(record)">
        <a>同步到目标数据源</a>
      </a-popconfirm>
    </span>

      </a-table>
    </div>
    <!-- table区域-end -->

    <!-- 表单区域 -->
    <dbmsViewCompare-modal ref="modalForm" :source1="selectSource1" :source2="selectSource2"></dbmsViewCompare-modal>
  </a-card>
</template>

<script>
  import DbmsViewCompareModal from './modules/DbmsViewCompareModal'
  import {getAction,httpParamAction} from '@/api/manage'

  export default {
    name: "DbmsViewCompare",
    components: {
      DbmsViewCompareModal
    },
    data() {
      return {
        /* 查询条件 */
        queryParam: {diff: "0"},
        selectSource1: 0,
        selectSource2: 0,
        totalCount:0,
        /* 数据源 */
        dataSource: [],
        loading: false,
        url: {
          mainTableUrl: '/dbms/dbmsDbsource/queryAllViewDiff',
          synViewUrl: '/dbms/dbmsDbsource/syncView',
          synDbSourceViewUrl: '/dbms/collect/collectView',
        },
        ipagination: {
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10','20','30'],
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        /* 排序参数 */
        isorter: {
          column: 'createTime',
          order: 'desc',
        },
        /* table选中keys*/
        selectedRowKeys: [],
        /* table选中records*/
        selectionRows: [],
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: 'rownum',
            key: 'rownum',
            width: 60,
            align: "center"
          },
          {
            title: '数据源从视图',
            align: "center",
            dataIndex: 'sourceResult'
          },
          {
            title: '从视图创建时间',
            align: "center",
            dataIndex: 'created1'
          },
          {
            title: '从视图修改时间',
            align: "center",
            dataIndex: 'lastDdlTime1'
          },
          {
            title: '目标数据源视图',
            align: "center",
            dataIndex: 'destinationResult'
          },
          {
            title: '目标视图创建时间',
            align: "center",
            dataIndex: 'created2'
          },
          {
            title: '目标视图修改时间',
            align: "center",
            dataIndex: 'lastDdlTime2'
          },
          {
            title: '对比结果',
            align: "center",
            dataIndex: 'result',
            scopedSlots: {customRender: 'result'},
          },
          {
            title: '操作',
            align: "center",
            dataIndex: '',
            scopedSlots: {customRender: 'action'},
          }
        ],
      }
    },
    created() {
    },
    methods: {
      syncDatasourceView(sourceId){
        console.log(sourceId);
        if(!sourceId||sourceId==null||sourceId==''){
          this.$message.warning('请选择数据源');
          return;
        }
        this.loading = true;
        var params={sourceId:sourceId};
        httpParamAction(this.url.synDbSourceViewUrl, params,'post').then((res) => {
          this.loading = false;
          this.$message.success('同步成功，请刷新页面');
        })

      },
      viewDiff(record) {
        this.$refs.modalForm.viewDiff(record);
      },
      searchQuery() {
        //加载数据 若传入参数1则加载第一页的内容
        var params = this.queryParam;//查询条件
        this.selectSource1 = this.queryParam.sourceId1;
        this.selectSource2 = this.queryParam.sourceId2;
        if(!this.selectSource1||this.selectSource1==''||!this.selectSource2||this.selectSource2==''){
          this.$message.error('请选择数据源');
          return;
        }
        this.loading = true;
        getAction(this.url.mainTableUrl, params).then((res) => {
          this.dataSource = res.result;
          this.totalCount=res.result.length;
          this.loading = false;
        })
      },
      searchReset() {
        this.queryParam = {}
      },
      syncView(record) {

        var viewName = record.sourceResult;
        if (viewName == null || viewName == '') {
          viewName = record.destinationResult;
        }
        if(!this.selectSource1||this.selectSource1==''||!this.selectSource2||this.selectSource2==''){
          this.$message.error('请选择数据源');
          return;
        }
        this.loading = true;
        var params = {sourceId1: this.selectSource1, sourceId2: this.selectSource2, viewName: viewName};
        getAction(this.url.synViewUrl, params).then((res) => {
          this.loading = false;
          this.$message.success('同步成功，请刷新页面');
          console.log(res);
        })
      },

    }

  }
</script>

<style lang="less" scoped>
  /** Button按钮间距 */
  .ant-btn {
    margin-left: 3px
  }

  .ant-card-body .table-operator {
    margin-bottom: 18px;
  }

  .ant-table-tbody .ant-table-row td {
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .anty-row-operator button {
    margin: 0 5px
  }

  .ant-btn-danger {
    background-color: #ffffff
  }

  .ant-modal-cust-warp {
    height: 100%
  }

  .ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto
  }

  .ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden
  }
</style>